Skip to content

Conversation

@CedricGuillemet
Copy link
Contributor

@CedricGuillemet CedricGuillemet commented Feb 25, 2025

  • Canvas plugin with more support for Web Canvas API
  • Test PG
  • Small change in Compiler Traverser to support bgfx bundled spirv (instead of our spirv fork) when building bgfx shader tool

CedricGuillemet and others added 30 commits February 6, 2025 11:24
Add `fontBoundingBoxAscent` and `fontBoundingBoxDescent` to textMetrics
- Adds bindings for setting and getting `letterSpacing`
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing
- Adds implementation for setter and getter
Co-authored-by: Ryan Tremblay <[email protected]>
… into CanvasTest

# Conflicts:
#	Polyfills/Canvas/Source/Context.cpp
- https://developer.mozilla.org/en-US/docs/Web/API/Path2D

Adds nanosvg.h for SVG path parsing.
Known missing functionality:
1. `addPath` doesn't accept DOMMatrix transform
2. `roundRect` doesn't accept CSS-style radii array
3. `ellipse` doesn't handle clockwise

Called from BabylonJS/Babylon.js#16221
-
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform
-
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
-
https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath#transform

usage:
```
// Path 2D
let path = new _native.Path2D();
let path2 = new _native.Path2D("M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 Q 90, 60 50, 90 Q 10, 60 10, 30 z");
path.addPath(path2, { a: 1, b: 0, c: 0, d: 1, e: 400, f: 0 }); // shift right 400
context.stroke(path);
```
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
Known Issues:
- clipping round rect does not have rounded corners

Co-authored-by: Cedric Guillemet <[email protected]>
Small PR just so later PRs that require modifying nanovg have proper
diffs
- allow NVGPaint to have 2 images (onlye used when text is mixed with
gradient)
- shader update


![image](https://github.com/user-attachments/assets/c0652079-5d45-49c8-acc6-1432c7928c46)
I'll need someone to generate the HSSL shader for me since I'm on Mac.
Currently doesn't support blurred text but can add that in a future PR.

---------

Co-authored-by: Cedric Guillemet <[email protected]>
- Adds example Path2D usage in experience.js.
- Makes Path2D work with .fill as well

![image](https://github.com/user-attachments/assets/18aef1c2-ea8e-48c6-b175-1c1e31e2c0d3)

---------

Co-authored-by: Cedric Guillemet <[email protected]>
…nto CanvasTest

# Conflicts:
#	.github/jobs/test_install_win32.yml
#	Apps/UnitTests/Scripts/tests.js
#	Plugins/NativeEngine/CMakeLists.txt
@CedricGuillemet
Copy link
Contributor Author

Comparison PG : https://playground.babylonjs.com/#TKVFSA

@CedricGuillemet CedricGuillemet changed the title Canvas test Canvas plugin Oct 15, 2025
@CedricGuillemet CedricGuillemet marked this pull request as ready for review October 15, 2025 14:28
Copy link
Member

@ryantrem ryantrem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think a lot of this has already been reviewed in the side branch, so mostly just commenting on some high level things related to bringing the code into master.

@CedricGuillemet CedricGuillemet merged commit e82f49c into master Oct 27, 2025
20 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants